<!DOCTYPE html>
<html>
<head>
    <title>Resume</title>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script language="JavaScript" type="application/javascript">
        function api(url, data, func) {
            var token = localStorage.getItem("token");
            $.ajax({
                "type" : 'POST',
                "url" : url,
                "data": data,
                "headers" : {
                    'token' : token
                }, "success" : function (data) {
                    if (data.state == 1100001) {
                        location.href = "/";
                        return;
                    }

                    func(data);
                }
            });
        }
        $(loadData);
        function loadData() {

            api("/resume/list", null, function (data) {
                $("#resume-list-table").find(".resume-list-table-tr").remove();
                if (data.content) {
                    for (var i in data.content) {
                        var item = data.content[i];
                        var trnode = $("<tr>").addClass("resume-list-table-tr");
                        var namenode = $("<td>").html(item.name).attr("dataId", item.id);
                        var addrnode = $("<td>").html(item.address);
                        var phonnode = $("<td>").html(item.phone);
                        var remdbnode = $("<td>").html("删除").addClass("rem-list").click(remList)
                        trnode.append(namenode);
                        trnode.append(addrnode);
                        trnode.append(phonnode);
                        trnode.append(remdbnode);
                        $("#resume-list-table").append(trnode);
                    }
                }

            });
        }
        function loginout() {
            // localStorage.removeItem("token");
            // document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
            api("/user/loginout", null, function (data) {
                location.reload();
            });

        }
        function remList() {
            var dataId = $(this).siblings("td")[0].getAttribute("dataId");
            api("/resume/del", {
                "id":dataId
            }, loadData)
        }
        function addList() {
            var trnode = $("<tr>").addClass("resume-list-table-tr");

            var namenode = $("<td>").html($("<input>").attr("name", "name").attr("placeholder", "请输入用户名").attr("autofocus", "true"));
            var addrnode = $("<td>").html($("<input>").attr("name", "address").attr("placeholder", "请输入地址"));
            var phonnode = $("<td>").html($("<input>").attr("name", "phone").attr("placeholder", "请输入手机号"));
            var submit = $("<span>").html("提交").addClass("submit-list").click(submitList)
            var cancel = $("<span>").html("取消").addClass("cancel-list").click(cancelList)
            var adddbnode = $("<td>").append(submit).append("|").append(cancel);
            trnode.append(namenode.keydown(keydownEnter));
            trnode.append(addrnode.keydown(keydownEnter));
            trnode.append(phonnode.keydown(keydownEnter));
            trnode.append(adddbnode);
            $("#resume-list-table").append(trnode);
        }
        function keydownEnter() {
            if (window.event.keyCode == 13) {
                submit(this);
            }
        }
        function submitList() {
            submit(this);
        }
        function submit(t) {
            var trnode = $(t).parents("tr");
            var name = trnode.find("input[name=name]").val().trim();
            var address = trnode.find("input[name=address]").val().trim();
            var phone = trnode.find("input[name=phone]").val().trim();
            trnode.find("input").css("border-color","");

            if (name == "") {
                trnode.find("input[name=name]").focus().attr("placeholder", "用户名不能为空").css("border-color","red");
                return;
            }
            if (address == "") {
                trnode.find("input[name=address]").focus().attr("placeholder", "地址不能为空").css("border-color","red");
                return;
            }
            if (phone == "") {
                trnode.find("input[name=phone]").focus().attr("placeholder", "电话不能为空").css("border-color","red");
                return;
            }

            api("/resume/add", {
                "name":name,
                "address":address,
                "phone":phone
            }, loadData)
        }

        function cancelList() {
            $(this).parents("tr").remove();
        }

    </script>
    <style type="text/css" rel="stylesheet">
        body {
            background-color: antiquewhite;
        }
        .thr-table-default {
            width: 100%;
            border-collapse:collapse;
            text-align: center;
            font-size: 13px;
            box-shadow: 0px 0px 3px #cccccc;
            opacity: 90%;

        }
        .thr-table-default th, .thr-table-default td {
            border-width: 1px;
            border-style: solid;
            border-color: #cccccc;
            cursor: default;
            background-color: #f1e2d0;
        }
        .thr-table-default th {
            /*background-color: #f7f7f7;*/
            background-color: #e8dac8;
        }
        .thr-table-default td {

        }
        .thr-table-default td:hover {
            /*background-color: #f0f0f0;*/
            background-color: #f9ecd6;
        }
        #resume-list {
            position: absolute;
            width: 500px;
            left: 50%;
            margin-left: -250px;
            margin-top: 100px;

        }
        #loginout {
            position: absolute;
            width: 98px;
            left: 50%;
            margin-left: 150px;
            background-color: #e8dac8;
            border-width: 0px 1px 1px 1px;
            border-style: solid;
            border-color: #cccccc;
            box-shadow: 0px 0px 3px #cccccc;
            font-size: 13px;
            text-align: center;
            cursor: pointer;
            border-radius: 0px 0px 5px 5px;
        }
        #loginout:hover {
            background-color: #f9ecd6;
        }
        .title {
            cursor: default;
            font-size: 13px;
            background-color: #e8dac8;
            padding: 5px;
            border-width: 1px 1px 0px 1px;
            border-style: solid;
            border-color: #cccccc;
            border-radius: 5px 5px 0px 0px;
            width: 150px;
            text-align: center;
            box-shadow: 0px 0px 3px #cccccc;
        }
        .add-list {
            position: absolute;
            top: 0;
            padding: 5px;
            font-size: 13px;
            right: 0px;
            cursor: pointer;
            background-color: #e8dac8;
            border-width: 1px 1px 0px 1px;
            border-style: solid;
            border-color: #cccccc;
            border-radius: 5px 5px 0px 0px;
        }
        .add-list:hover {
            background-color: #f9ecd6;
        }
        .submit-list {
            padding-left: 5px;
            padding-right: 5px;
            cursor: pointer;
        }
        .cancel-list {
            padding-left: 5px;
            padding-right: 5px;
            cursor: pointer;
        }
        .submit-list:hover, .cancel-list:hover {
            background-color: #e8dac8;
        }
        .resume-list-table-tr input {
            border-width: 1px;
            border-style: solid;
            border-color: #e8dac8;
        }
    </style>
</head>
<body>

<div id="resume-list">
    <div class="title">从数据库查询数据结果</div>
    <div class="add-list" onclick="addList()">新增</div>
    <table id = "resume-list-table" class="thr-table-default">
        <tr>
            <th>用户名</th>
            <th>地址</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
    </table>
    <div onclick="loginout()" id="loginout">注销登录</div>
</div>
<canvas id="c"></canvas>
<script type="text/javascript" src='/js/TweenMax.min.js'></script>
<script type="text/javascript" src="/js/index.js"></script>
</body>
</html>